<!-- 配置车辆弹窗 -->
<template>
  <el-dialog
    :visible="dialogVisible"
    title="配置车辆"
    width="640px"
    @close="close"
  >
    <!-- 司机信息 -->
    <div
      v-for="item in filterList"
      :key="item.userId"
      class="header"
    >
      <div class="num">
        <label>司机编号：</label>
        <span>{{ item.userId }}</span>
      </div>
      <div class="name">
        <label>司机名称：</label>
        <span>{{ item.name }}</span>
      </div>
      <div class="iphone">
        <label>司机电话：</label>
        <span>{{ item.mobile }}</span>
      </div>
      <div class="agency">
        <label>所属机构：</label>
        <span>{{ item.agency.name }}</span>
      </div>
    </div>
    <!-- 下拉列表 -->
    <div class="serchBox">
      <el-form>
        <el-form-item
          label="配置车辆:"
          label-width="80px"
        >
          <el-select
            v-model="carSelectClone"
            style="width:240px"
            @change="selectChange"
          >
            <el-option
              v-for="item in carSelectList"
              :key="item.id"
              :label="item.licensePlate"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 车牌号 -->
    <el-table
      v-if="carSelect"
      :data="filterList"
    >
      <el-table-column
        label="车牌号"
        prop="truck.licensePlate"
      ></el-table-column>
      <el-table-column
        label="车辆状态"
        prop="truck.runStatus"
      >
        <span
          v-for="item in filterList"
          :key="item.id"
          class="tableColumn-status "
          :class="{ 'stop-use': stopStates === 0 }"
        >{{ runState[item.truck ? item.truck.runStatus : 0] }}</span>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <el-button
          type="text"
          size="mini"
          @click="viewsBtn"
        >查看</el-button>
        <span style="color:#979090;">|</span>
        <el-button
          type="text"
          size="mini"
          style="color:red;"
          @click="delBtn"
        >删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 没有数据的时候展示的table表格 -->
    <el-table
      v-else
    >
      <el-table-column label="车牌号"></el-table-column>
      <el-table-column label="车辆状态"> </el-table-column>
      <el-table-column label="操作"> </el-table-column>
      <template slot="empty">
        <img
          src="@/assets/empty.png"
          style="width:100px;height:80px;margin-top:20px"
        >
        <p>这里空空如也~</p>
      </template>
    </el-table>
    <!-- 按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="warning"
          style="width:90px;height:40px"
          @click="btnOK"
        >确定</el-button>
        <el-button
          style="width:90px;height:40px"
          @click="close"
        >取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { driverArrangeCar, getTruckListInDriver } from '@/api/transit'
export default {
  name: 'CarConfig',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 司机分页数据
    sijiList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 司机id
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableShow: true,
      stopStates: 0,
      carSelectClone: '', // 下拉列表绑定的假数据
      carSelect: '', // select下拉列表绑定的数据
      carSelectList: [], // 配置车辆下拉列表
      runState: {
        // 车辆状态枚举
        1: '可用',
        0: '停用'
      }
    }
  },
  computed: {
    // 筛选出来和点击的id相同的元素，让header盒子渲染
    filterList() {
      return this.sijiList ? this.sijiList.filter(item => item.userId === this.userId) : []
    }
  },
  watch: {
    // 侦听弹窗组件的状态，每次关闭和打开都让下拉列表展示新的车牌
    dialogVisible: {
      deep: true,
      handler(newV) {
        this.filterList.forEach(item => {
          this.carSelect = item.truck ? item.truck.id : ''
          this.carSelectClone = item.truck ? item.truck.licensePlate : ''
          this.stopStates = item.truck ? item.truck.runStatus : 0
        })
      }
    },
    // 侦听下拉列表展示的数据，让filterList的车牌也同时改变
    carSelectClone(newV) {
      const res = this.carSelectList.find(item => item.id === newV)
      if (this.filterList[0].truck && res) {
        this.filterList[0].truck.licensePlate = res.licensePlate
      }
    }
  },
  created() {
    this.getTruckListInDriver()
  },
  methods: {
    // 删除按钮
    delBtn() {
      this.carSelect = ''
      this.carSelectClone = ''
    },
    // 查看按钮，跳转到车辆详情页
    viewsBtn() {
      this.$router.push(`/transit/vehicle-detail/${this.carSelect}`)
    },
    // 确认按钮，给司机安排车辆
    async btnOK() {
      const { code, msg } = await driverArrangeCar({
        driverIds: [this.userId],
        truckId: this.carSelect
      })
      if (code !== 200) {
        this.$message.error(msg)
      } else {
        this.$message.success(msg)
      }
    },
    // 下拉列表，改变车辆状态
    selectChange() {
      if (this.filterList[0].truck) {
        this.filterList[0].truck.runStatus = 0
      } else {
        this.filterList[0].truck = {
          licensePlate: this.carSelectClone,
          runStatus: 0
        }
      }
      this.carSelect = this.carSelectClone
      this.stopStates = this.filterList[0].truck ? this.filterList[0].truck.runStatus : 0
    },
    // 关闭弹窗
    close() {
      this.$emit('update:dialogVisible', false)
    },
    // 获取下拉列表的车牌号数据
    async getTruckListInDriver() {
      const { data } = await getTruckListInDriver()
      this.carSelectList = data
      // .map(item => {
      //   return item.licensePlate
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
  padding-bottom: 20px;
}
.serchBox {
  width: 584px;
  margin: 0 auto;
  margin-top: 19px;
  .el-select {
    width: 238px;
  }
  margin-bottom: 20px;
}
.workTime {
  white-space: nowrap;
}
.header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 90px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  margin: 0 auto;
  // 使得整体内容距离上部分的距离为20px
  margin-top: -10px;
  .el-input {
    width: 240px;
  }
  div {
    flex: 40%;
    // 使包裹的所有div的上下间距为14px
    // margin-bottom: 14px;
  }
  .num,
  .iphone {
    flex: 60%;
  }
  .num,
  .name {
    margin-bottom: 14px;
  }
  label {
    width: 71px;
    height: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #20232a;
    letter-spacing: 0.16px;
    text-align: right;
  }
  span {
    color: #818693;
    font-size: 14px;
  }
}
.pagination {
  margin: 32px 0 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
}
.selected-driver {
  margin-top: 18px;
}
</style>
